import React from 'react';
import './index.styl';
import { List, Avatar, Icon } from 'antd';
import API from '@common/api';
import Forum from '@/src/components/forumPosts/Forum';
import Search from "../forumPosts/Search";
import userStore from "../../common/userStore";

const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);

class TopicList extends React.Component {
  constructor(props) {
    console.log("Topic List rendering");
    super(props);
    // console.log("Now it is on search or not:");
    // console.log(this.props.isSearch);
    // console.log("the search key is:");
    // console.log(this.props.searchKey);
    this.state = {
      listData: [],
      isSearch: false,
      searchKey: '',
    }
    this.initTopicList();
    this.changeToOrder = this.changeToOrder.bind(this);
    this.setSearch = this.setSearch.bind(this);
    userStore.subscribe(this.setSearch);
  }

  setSearch() {
    this.setState({ isSearch: userStore.getState().isSearch, searchKey: userStore.getState().searchKey });
  }

  changeToOrder(e) {
    console.log("the order is:");
    console.log(e.key);
    this.setState({ order: e.key, }, () => {
      console.log("afterChangingOrder:");
      console.log(this.state.order);
    });
  }

  async initTopicList() {
    let response = await API.queryAllTopics();
    console.log(response, "woshi")
    let res = response.data
    this.setState({
      listData: res
    })
  }
  render() {
    return (
      <div >
        {/* <List
      itemLayout="vertical"
      size="large"
      pagination={{
        onChange: (page) => {
          console.log(page);
        },
        pageSize: 3,
      }}
      dataSource={this.state.listData}
      renderItem={item => (
        <List.Item
          key={item.title}
          actions={[<IconText type="star-o" text="156" />, <IconText type="like-o" text="156" />, <IconText type="message" text="2" />]}
          extra={<img width={272} height={172} alt="logo" src={item.topicImg.replace(/\"/g,"")}/>}
        >
          <List.Item.Meta
            avatar={<Avatar src={item.user.avatarUrl} />}
            title={<a href={item.href}>{item.user.username}</a>}
            description={item.description}
          />
          {item.topicTitle}
        </List.Item>
      )}
      
    /> */}
        {this.state.isSearch ?
          <Search /> : <Forum />
        }

      </div>
    )
  }
}
export default TopicList;